<template>
    <div>
      <userbar name="用户名"></userbar>
      <userbar class="l-id" name="用户ID" :val="person.userInfo.id"></userbar>
      <userbar name="注册时间" :val="person.userInfo.createDate | formData"></userbar>
      <!--<userbar name="邀请码" :val="person.userInfo.orangeKey"></userbar>-->
      <!--<userbar name="引荐者" :val="recommend.name"></userbar>-->
      <!--<userbar name="引荐者ID" :val="recommend.id"></userbar>-->

      <!--二维码展示-->
      <div class="l-qrcode">
        <canvas ref="qrcode"></canvas>
        <div class="l-qrcode-content">
          <img :src="arrow" alt="无法显示">
          <p>这是您的专属分享邀请码和二维码赶紧分享吧！~</p>
        </div>
      </div>
    </div>
</template>

<script>

   import qrcode from 'qrcode'
   import userbar from "./common/UserBar"
   import arrow from "~/img/arrow.png"
   import {mapState} from 'vuex'
    export default {
        name: "userinfo",
        data () {
          return {
            arrow,
            recommend: {
              name: "",
              id: ""
            }
          }
        },
        created () {
          this.$nextTick(() => {
            var cvs = this.$refs.qrcode
            qrcode.toCanvas(cvs, "url,text", {
              width: 188,
              height: 188
            })
          })
        },
        computed: {
          ...mapState(['person'])
        },
        components: {
          userbar
        },
        filters: {
          formData (val) {
            let date = new Date(val)

            return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" +date.getDate()
          }
        }
    }
</script>

<style scoped>
  .l-qrcode {
    display: flex;
    color: #9a7136;
  }

  .l-qrcode-content {
    padding-top: 60px; /*no*/
    line-height: 40px;
    font-size: 28px;
  }

</style>
